<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="aaa"  >是否会员{{aaa}} 
        
        <br>
        <select  v-model="bbb">
            <option value="普通顾客">普通顾客</option>  
            <option value="会员" >会员</option>  
            <option value="超级会员">超级会员</option> 
        </select>{{bbb}}
        <br>
        数量：<input type="text"  v-model="ccc">
        <br>
        单价：<input type="text"  v-model="ddd" @click="visible=!visible">
        <br>
        </div>
        <div v-show="visible">
            你是{{bbb}},你买的数量：{{ccc}}，单价：{{ddd}},折扣为：{{discounted}}，总价：{{ccc*ddd*discounted}}
        </div>
        
        

    </div>
</body>
</html>

<script>

    const appConn = Vue.createApp({
        data() {
            return {
                aaa:'',
                bbb:'',
                ccc:0,
                ddd:0,
                visible:false,
                eee:1
                
            }
        },
        computed(){
            discounted:{
                if(this.bbb=='普通顾客'){
                    return 1
                }else if(this.bbb=='会员'){
                    return 0.75
                }else return 0.6
            }
        }
    }).mount('#app')
</script>